<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>js定时器导航栏</title>
    <style>
        body,ul,p { margin:0; padding:0; }
        em { font-style:normal; }
        li { list-style:none; }
        .clear { zoom:1; }
        .clear:after { content:''; display:block; clear:both; }
        /*---三角---*/
        .triangle_up {  position:absolute;  width:0;  height:0;  overflow:hidden;  border-left:4px solid transparent;  border-right:4px solid transparent;  }
        .triangle_up {  border-bottom:4px solid #b3c1c9;  }
        .box{ width: 400px; height: 100px;  margin: 40px auto; background-color: #fff; padding: 10px 10px 0px 10px; }
        .warp{ width: 400px; height: 60px; background-color: #18559a; border: 1px solid #748ca1; border-radius:8px; }
        #list li{ float: left; height: 60px; width: 60px; position: relative ; margin-right: 10px; cursor: pointer; }
        #list li:nth-of-type(2){ width: 80px;   }
        #list li:nth-of-type(4){ border-right:none; }
        #list .active p{ background-color: #85a1c7; border-radius: 5px; }
        #list li p{  height:30px; line-height: 30px; text-align: center; color: #fff; font-size: 14px; margin: 15px 0px; }
        #list li span{ width: 0px;height: 40px; border: 1px solid #97c2e8; display: inline-block; position: absolute ; top: 10px; right: -5px;}
        .content{ width:302px; height: 30px; border-radius: 5px; background-color: #fbf9fb; position: absolute; top: 5px; left: -150px; border: 1px solid #b3c1c9; }
        #list_1 li{ width: 100px; height: 30px; float: left; margin-right: 0px; line-height: 30px; text-align: center; color: #265a84; position: relative;  cursor: pointer;}
        .con{position: relative ;width: 400px; height: 30px; display: none}
        .con a{ top: 2px;left: 30px;}
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oUl=document.getElementById("list");
            var oLi=oUl.getElementsByTagName("li");
            var oDiv=document.getElementById("div_1");
            var aA=oDiv.getElementsByTagName("a")[0];
            var aDiv=oDiv.getElementsByTagName("div")[0];
            var than=null;
            for(var i=0;i<oLi.length;i++){
                oLi[i].index=i;
                oLi[i].onmouseover=function(){
                    clearTimeout(timer);
                    if(than !=null){
                        than.className="";
                    }
                    oDiv.style.display="block";
                    this.className="active";
                    if(this.index==0){
                        aA.style.left=parseInt(getWinth(this,"width"))/2+"px";
                    }else{
                        var arr=[];
                        for(var i=0;i<this.index;i++){
                            arr.push(i);
                        }
                        var winths=0;
                        for(var i=0;i<arr.length;i++){
                            winths+=parseInt(getWinth(oLi[i],"width"))+10;
                        }
                        aA.style.left=winths+parseInt(getWinth(this,"width"))/2+"px";
                    }
                    aDiv.style.left=(this.index-1)*80+"px";
                    than=this;
                }
                var timer=null;
                oLi[i].onmouseout=function(){
                    outoPlay();
                }
            }
            oDiv.onmouseover=function(){
                clearTimeout(timer);
            }
            oDiv.onmouseout=function(){
                outoPlay();
            }
            function outoPlay(){
                clearTimeout(timer);
                timer=setTimeout(function(){
                    than.className="";
                    this.className="";
                    oDiv.style.display="none";
                },1000);
            }
            function getWinth(obj,ev){
                return (obj.currentStyle? obj.currentStyle : window.getComputedStyle(obj, null))[ev];
            }
        }
    </script>
</head>
<body>
<div class="box">
    <div class="warp clear">
        <ul id="list">
            <li>
                <p>首页</p>
                <span></span>
            </li>
            <li>
                <p>关于我们</p>
                <span></span>
            </li>
            <li>
                <p>作品</p>
                <span></span>

            </li>
            <li>
                <p> 博客</p>
            </li>
        </ul>
    </div>
    <div class="con" id="div_1">
        <a href="#" class="triangle_up"></a>
        <div class="content clear">
            <ul id="list_1">
                <li>1233</li>
                <li>22333</li>
                <li>11333</li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>